<template>
	<div class="maps">
		<Returns rTitle='跑步地图'/>
		<baidu-map class="map" :center="{lng: 116.432045, lat: 39.910683}" :zoom="10" :scroll-wheel-zoom="true">
  			<bml-curve-line :points="points" :editing="true" @lineupdate="update"></bml-curve-line>
		</baidu-map>
		<div class='luXian'><img src="../assets/images/login/luXian.png" alt="">路线</div>
	</div>
</template>
<script src="https://unpkg.com/vue-baidu-map"></script>
<script>
import {BmlCurveLine} from 'vue-baidu-map';
import Returns from '../components/Returns';
export default {
  methods: {
    update (e) {
      this.points = e.target.cornerPoints
    }
  },
  data () {
    return {
      points: [
        {lng: 116.432045, lat: 39.910683},
        {lng: 116.129721, lat: 39.814429},
        {lng: 116.491121, lat: 39.727053}
      ],
      wheel:true,
      zooms:100
    }
  },
	components: {
    BmlCurveLine,
		Returns
  }
}
</script>
<style scoped lang='less'>
	.maps{
		position: relative;
		.banner{
			height: 88/100rem;
			line-height: 88/100rem;
			background-color: #171818;
			color: #fff;
			text-align: center;
			letter-spacing: 2/100rem;
			position: relative;
			font-size: 34/100rem;
			i{
				font-size: 25/100rem;
				color:#fff;
				position: absolute;
				left:20/100rem;
			}
		}
		.map {
		  width: 100%;
		  height: 1250/100rem;
		}
		.luXian{
			width: 210/100rem;
			height:80/100rem;
			border-radius: 40/100rem;
			position: absolute;
			bottom:1rem;
			left:250/100rem;
			background-color: #fed906;
			text-align: center;
			font-size: 40/100rem;
			color:#171818;
			line-height: 80/100rem;
			img{
				height:60/100rem;
				vertical-align: middle;
				display: inline-block;
				margin-right: 10/100rem;
			}
		}
	}
</style>
